<template>
	<view class="warp bff">
		<view class="home_top"></view>
		<view class="warp_center">
			<uni-swiper-dot :info="banner" :current="current" field="content" mode="round">
				<swiper indicator-dots="round" autoplay :interval="2000" :duration="500">
					<swiper-item v-for="(item,index) in banner" :key="index">
						<image style="width: 90%;" :src="item.img" mode="heightFix"></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="phone box-s3 " @click="callphone()">
			<image src="../../../static/lxkf.png" class="icon mt30"></text>
				<text class="list-text">联系热线</text>
				<text class="list-phone c66">{{phone}}</text>
				<text class="navigat-arrow iconfont c66">&#xe601;</text>
		</view>
		<view class="phone box-s3 " style="top: 450upx;" @click="callphone()">
			<image src="../../../static/lxkf.png" class="icon mt30"></text>
				<text class="list-text">软件支持</text>
				<text class="list-phone c66">{{swphone}}</text>
				<text class="navigat-arrow iconfont c66">&#xe601;</text>
		</view>
	</view>
</template>

<script>
	import {
		getCooperation
	} from '../../../api/api.js'
	export default {
		data() {
			return {
				swphone:"13423894939",
				userInfo: {},
				current: 0,
				mobile: "",
				banner: [],
				phone:"",
			};
		},
		onLoad() {
			this.datainit()
		},
		methods: {
			// 拨打客服电话
			// call客服
			callphone() {
				uni.makePhoneCall({
					phoneNumber: this.phone
				});
			},
			// 拨打软件服务
			callphone() {
				uni.makePhoneCall({
					phoneNumber: this.swphone
				});
			},
			// 数据初始化
			datainit() {
				getCooperation().then(res => {
					this.banner = res.data.banner
					this.phone = res.data.mobile
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #fafafa !important;
	}

	.warp_center {
		display: block;
		width: 100%;
		position: absolute;
		top: 20rpx;
		text-align: center;
	}

	.home_top {
		/* padding-left: -25px; */
		background-image: url('http://xiaowen.cool:86/yjky/yjkybg.png');
		background-size: cover;
		width: 750upx;
		height: 370upx;
		padding: 20upx;
		box-sizing: border-box;
		/* background-color: #4cd964; */
		flex-direction: row;
		align-items: center;
	}

	.warp {
		position: relative;

		.phone {
			position: absolute;
			height: 120rpx;
			background-color: #FFFFFF;
			width: 90%;
			left: 50%;
			transform: translateX(-50%);
			top: 350upx;
			border-radius: 15rpx;
			height: 90upx;
			/* width: 750upx; */
			box-sizing: border-box;
			flex-direction: row;
			display: flex;
			padding: 0upx 20upx;


			.navigat-arrow {
				height: 90upx;
				width: 40upx;
				line-height: 90upx;
				font-size: 34upx;
				color: #555;
				text-align: right;
				/* font-family: texticons; */
			}

			.list-text {
				height: 90upx;
				line-height: 90upx;
				font-size: 28rpx;
				margin-left: 15rpx;
				color: #555;
				flex: 1;
				text-align: left;
			}

			.list-phone {
				height: 90upx;
				flex: 1;
				line-height: 90upx;
				font-size: 28rpx;
				color: #777777;
			}

		}
	}
</style>
